<template>
  <div id="OrdersList">
    <h1 class="title">查看所有订单信息</h1>
    <el-dialog title="查看详情" :visible.sync="dialogFormVisible">
      <el-table :data="details">
        <el-table-column fixed prop="_id" label="订单编号"> </el-table-column>
        <el-table-column prop="orderTIme" label="订单时间"> </el-table-column>
        <el-table-column prop="province" label="订单名称">
          <template slot-scope="scope">
            <label>{{ scope.row.insuresID.name }}</label>
          </template>
        </el-table-column>
        <el-table-column label="订单状态">
          <template slot-scope="scope">
            <label>{{ ordersState(scope.row.orderState) }}</label>
          </template>
        </el-table-column>

        <el-table-column label="付款方式">
          <template slot-scope="scope">
            <label>{{ scope.row.insuresID.payType }}</label>
          </template>
        </el-table-column>

        <el-table-column label="保单类型">
          <template slot-scope="scope">
            <label>{{ scope.row.insuresID.policy.join(" / ") }}</label>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <template>
      <el-table stripe :data="tableData" border style="width: 100%">
        <el-table-column type="index" fixed align="center"></el-table-column>
        <el-table-column
          prop="_id"
          label="订单编号"
          align="center"
          width="220px"
        >
        </el-table-column>
        <el-table-column
          prop="orderTIme"
          label="订单时间"
          align="center"
          width="120px"
        >
        </el-table-column>
        <el-table-column
          prop="province"
          label="订单名称"
          align="center"
          width="120px"
        >
          <template slot-scope="scope">
            <label>{{ scope.row.insuresID.name }}</label>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" width="120px">
          <template slot-scope="scope">
            <label>{{ ordersState(scope.row.orderState) }}</label>
          </template>
        </el-table-column>

        <el-table-column label="付款方式" align="center" width="120px">
          <template slot-scope="scope">
            <label>{{ scope.row.insuresID.payType }}</label>
          </template>
        </el-table-column>

        <el-table-column label="保单类型" align="center" width="120px">
          <template slot-scope="scope">
            <label>{{ scope.row.insuresID.policy.join(" / ") }}</label>
          </template>
        </el-table-column>

        <el-table-column label="保险对象" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.insuresID.suitableFor }}
          </template>
        </el-table-column>

        <el-table-column label="可续保" align="center" width="120px">
          <template slot-scope="scope">
            {{ scope.row.insuresID.renew?'是':'否' }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="130px">
          <template slot-scope="scope">
            <el-button type="text" @click="clickDetails(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage + 1"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import apis from "@h/apis.js";
const { admins } = apis;
export default {
  methods: {
    clickDetails(row) {
      this.details = [row];
      this.dialogFormVisible = true;
    },
    //每页数据条数
    handleSizeChange(val) {
      this.pageData.pageSize = val;
    },

    //翻页
    handleCurrentChange(val) {
      this.pageData.currentPage = val - 1;
    },

    ordersState(data) {
      switch (data) {
        case 1:
          return "待支付";
          break;
        case 2:
          return "已支付";
          break;
        case 3:
          return "已取消";
          break;
      }
    },

    //获取数据
    async getData() {
      const { pageSize, currentPage } = this.pageData;
      const { data, msg, state, error } = await admins.getAllOrders({
        pageSize,
        currentPage,
      });
      const { total, pageTotal } = data;
      this.tableData = data.data;
      this.pageData.total = total;
      this.pageData.pageTotal = pageTotal;
    },
  },

  data() {
    return {
      details: [],
      tableData: [],
      dialogFormVisible: false,
      pageData: {
        pageSize: 5, //每页显示数据条数
        currentPage: 0, //当前页
        pageTotal: 0, //总页数
        total: 0, //总数据条数
      },
    };
  },

  watch: {
    "pageData.pageSize"() {
      this.getData();
    },
    "pageData.currentPage"() {
      this.getData();
    },
  },

  mounted() {
    this.getData();
  },
};
</script>


<style lang="scss" scoped>
#OrdersList {
  .title {
    font-size: 18px;
    font-weight: lighter;
    margin: 10px 0;
  }
  .block {
    margin: 10px 0;
  }
}
</style>